<template>
  <el-card class="box-card">
    <el-card class="box-form">
      <template #header>
        <div class="card-header">
          <h3>登录页面</h3>
        </div>
      </template>
      <el-form
        ref="loginRef"
        :model="loginForm"
        :rules="loginRules"
      >
        <el-form-item
          label="用户名："
          prop="username"
        >
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密　码："
          prop="password"
        >
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="button"
            type="primary"
            @click="onLogin"
            size="large"
          >
            登 入
          </el-button>
          <el-button
            @click="onReset"
            class="button"
            size="large"
          >
            重 置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-card>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { ElNotification } from 'element-plus'
  import router from '../router'
  import { useUserStore } from '@/store/user'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const userStore = useUserStore()
  const loginRef = ref(null)

  // 登录表单
  const loginForm = reactive({
    username: 'admin',
    password: '123456',
  })
  // 校验规则
  const loginRules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 10, message: '用户名长度必须在3到10之间', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 3, max: 16, message: '密码长度必须在3到16之间', trigger: 'blur' },
    ],
  }

  // 登入
  const onLogin = () => {
    loginRef.value.validate(async (valid) => {
      // adminLogin
      // 校验
      if (!valid) {
        // 校验错误
        return ElNotification({
          title: '错误',
          message: '格式错误',
          type: 'error',
        })
      }

      const data = await userStore.userLogin(loginForm)
      if (!data.errno) {
        // 有就跳转到目标页面 没有就是首页
        router.push(route.query.redirectUrl || '/')
      }
    })
  }

  // 重置
  const onReset = () => {
    loginRef.value.resetFields()
  }
</script>

<style lang="scss" scoped>
  .box-card {
    height: 100%;
    background: rgba(38, 72, 176) url('/images/loginBg.jpg') center / cover no-repeat;

    .box-form {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 70%;
      max-width: 750px;
      transform: translate(-50%, -50%);

      .card-header {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .el-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .el-form-item {
          width: 70%;
          display: flex;
          align-items: center;
          justify-content: center;
          --el-form-label-font-size: 16px;
          margin-top: 15px;
          margin-bottom: 15px;

          .button {
            width: 90px;
          }

          &.center {
            display: flex;
            justify-content: center;
          }

          .el-input {
            width: 300px;
          }
        }
      }
    }
  }
</style>
